<script setup lang="ts">
import { onMounted, ref } from "vue";
import type { CategoryVo } from "@/type";
import { useRouter } from "vue-router";
import { categoryApi } from "@/api";

const router = useRouter();
const categories = ref<CategoryVo[]>([]);
const getCategoryList = async () => {
  const res = await categoryApi.getCategoryList();
  categories.value = res.result;
};
onMounted(() => {
  getCategoryList();
});
</script>

<template>
  <div class="bg-white rounded-lg shadow-sm p-6">
    <h3 class="text-lg font-bold mb-4">文章分类</h3>
    <div class="space-y-3">
      <div
        v-for="category in categories"
        :key="category.name"
        @click="router.push(`/category?id=${category.id}`)"
        class="flex justify-between items-center cursor-pointer hover:text-blue-600"
      >
        <span class="transition-all">{{ category.name }}</span>
        <span class="text-gray-500">{{ category.articleCount }}</span>
      </div>
    </div>
  </div>
</template>

<style scoped></style>
